<template>
  <div class="home-container">
    <!-- 背景水墨效果 -->
    <div class="background-layer">
      <div class="ink-splash ink-1"></div>
      <div class="ink-splash ink-2"></div>
    </div>
    
    <header class="home-header">
      <div class="header-left">
        <div class="logo-container">
          <div class="logo-emblem"></div>
        </div>
        <h1>侠士{{ user.name }}，别来无恙</h1>
      </div>
      <div class="header-right">
        <div class="user-profile" @click="toggleProfileMenu">
          <img :src="user.avatar" alt="用户头像" class="avatar" />
          <span class="username">{{ user.username }}</span>
        </div>
        
        <div v-if="showProfileMenu" class="profile-dropdown">
          <button @click="handleLogout" class="logout-button">
            归隐江湖
          </button>
        </div>
      </div>
    </header>
    
    <main class="home-content">
      <section class="welcome-section">
        <div class="welcome-card">
          <h2>江湖风云录</h2>
          <p>武林风起云涌，少侠且看今日江湖事。</p>
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon">📊</div>
              <div class="stat-content">
                <div class="stat-number">12</div>
                <div class="stat-label">待办任务</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">📅</div>
              <div class="stat-content">
                <div class="stat-number">5</div>
                <div class="stat-label">今日会议</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">📈</div>
              <div class="stat-content">
                <div class="stat-number">85%</div>
                <div class="stat-label">完成率</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <section class="features-section">
        <h2>系统功能</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">📝</div>
            <h3>任务管理</h3>
            <p>创建、分配和跟踪您的任务进度</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">👥</div>
            <h3>团队协作</h3>
            <p>与团队成员实时沟通和协作</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">📊</div>
            <h3>数据分析</h3>
            <p>查看和分析您的工作数据报表</p>
          </div>
        </div>
      </section>
    </main>
    
    <footer class="home-footer">
      <p>© 2024 系统管理平台 | 版权所有</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import authService from '../services/auth.js';

const router = useRouter();
const showProfileMenu = ref(false);

// 计算属性，获取当前用户信息
const user = computed(() => authService.getCurrentUser());

// 组件挂载时检查用户登录状态
onMounted(() => {
  if (!authService.checkAuth()) {
    router.push('/login');
  }
  
  // 添加点击外部关闭下拉菜单的事件监听
  document.addEventListener('click', handleClickOutside);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

// 切换用户菜单显示状态
const toggleProfileMenu = () => {
  showProfileMenu.value = !showProfileMenu.value;
};

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  const profileDropdown = document.querySelector('.profile-dropdown');
  const userProfile = document.querySelector('.user-profile');
  
  if (profileDropdown && userProfile && 
      !profileDropdown.contains(event.target) && 
      !userProfile.contains(event.target)) {
    showProfileMenu.value = false;
  }
};

// 处理退出登录
const handleLogout = async () => {
  authService.logout();
  router.push('/login');
};
</script>

<style scoped>
/* 引入字体样式 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* 全局变量 */
:root {
  --primary-color: #8a1a1a; /* 中国红 */
  --secondary-color: #d4a017; /* 金色 */
  --dark-color: #2c1e1e; /* 深棕色 */
  --light-color: #f7f1e5; /* 米色 */
  --accent-color: #1b6d85; /* 青色 */
}

.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--light-color);
  position: relative;
  overflow: hidden;
  font-family: 'Noto Serif SC', serif;
}

/* 背景水墨效果 */
.background-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.08;
}

.ink-splash {
  position: absolute;
  border-radius: 50%;
  background: var(--dark-color);
  filter: blur(150px);
}

.ink-1 {
  width: 800px;
  height: 800px;
  top: -400px;
  left: -200px;
}

.ink-2 {
  width: 600px;
  height: 600px;
  bottom: -300px;
  right: -150px;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: rgba(247, 241, 229, 0.95);
  border-bottom: 2px solid var(--secondary-color);
  position: relative;
  z-index: 1;
}

.logo-container {
  width: 50px;
  height: 50px;
  margin-right: 16px;
}

.logo-emblem {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--secondary-color) 0%, var(--primary-color) 70%);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.5);
}

.logo-emblem::after {
  content: '燕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: white;
  font-weight: 700;
}

.home-header h1 {
  color: var(--primary-color);
  font-size: 24px;
  margin: 0;
  display: flex;
  align-items: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.user-profile:hover {
  background-color: rgba(212, 160, 23, 0.1);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--secondary-color);
}

.username {
  color: var(--dark-color);
  font-weight: 500;
}

.profile-dropdown {
  position: absolute;
  right: 40px;
  top: 80px;
  background: var(--light-color);
  border: 2px solid var(--secondary-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 2;
  animation: dropdown-slide-in 0.3s ease-out;
}

@keyframes dropdown-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logout-button {
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Noto Serif SC', serif;
  border-radius: 8px;
  text-align: center;
}

.logout-button:hover {
  background-color: rgba(138, 26, 26, 0.1);
}

.home-content {
  flex: 1;
  padding: 40px;
  position: relative;
  z-index: 1;
}

.welcome-section {
  margin-bottom: 60px;
}

.welcome-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--secondary-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.welcome-card h2 {
  color: var(--primary-color);
  font-size: 28px;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.welcome-card p {
  color: var(--dark-color);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-left h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-heading);
}

.header-right {
  position: relative;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.user-profile:hover {
  background-color: var(--color-background-mute);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.username {
  font-weight: 500;
  color: var(--color-text);
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 100;
}

.logout-button {
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-text);
  font-size: 14px;
  border-radius: 8px;
}

.logout-button:hover {
  background-color: var(--color-background-mute);
  color: #e74c3c;
}

.home-content {
  flex: 1;
  padding: 40px;
}

.welcome-section {
  margin-bottom: 40px;
}

.welcome-card {
  background: var(--color-background-soft);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.welcome-card h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 16px;
}

.welcome-card p {
  color: var(--color-text);
  opacity: 0.8;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--color-background);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--color-border-hover);
}

.stat-icon {
  font-size: 32px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-heading);
}

.stat-label {
  font-size: 14px;
  color: var(--color-text);
  opacity: 0.7;
}

.features-section h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 24px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.feature-card {
  padding: 28px;
  background: var(--color-background-soft);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--color-text);
  opacity: 0.7;
  font-size: 14px;
}

.home-footer {
  padding: 20px 40px;
  background: var(--color-background-soft);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.home-footer p {
  color: var(--color-text);
  opacity: 0.6;
  font-size: 14px;
}

@media (max-width: 768px) {
  .home-header {
    padding: 16px 20px;
  }
  
  .header-left h1 {
    font-size: 18px;
  }
  
  .home-content {
    padding: 20px;
  }
  
  .stats-grid,
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style>